<template>
    <div class="w-full flex">
        <a-select @change="getVal" :disabled="props.disabled" :labelInValue="true" class="w-full readonly" allowClear @click="openPanel" @deselect="deselect" mode="tags" v-model:value="value" :placeholder="props.disabled ? '-' : props.placeholder" :options="options">
            <template #dropdownRender>
                <div>
                    <div class="flex flex-col w-full" v-if="state.addPanel === 0">
                        <div class="flex justify-between items-center w-full">
                            <d-input autofocus v-model:value="state.keyword" style="width: 100%" :bordered="false" :placeholder="'搜索' + props.title"></d-input>
                            <sysIcon @click="addItem" class="mr-1.5 ml-1 mb-1 link text-gray-500" type="system-jiahao"></sysIcon>
                        </div>
                        <a-divider class="m-0" />
                        <div>
                            <div v-if="state.loading" class="p-10 flex justify-center items-center"><a-spin /></div>
                            <a-empty class="mt-4 mb-4" description="" v-if="!state.options.length && !state.loading" />
                            <div v-else>
                                <div @click="checkItem(item)" class="flex justify-between items-center cursor-pointer hover:bg-gray-100 p-2 itemsClass" v-for="item in state.options" :key="item.id" v-show="item.show">
                                    <div :title="item.label" class="truncate"><a-badge :color="item.color" />{{ item.label }}</div>
                                    <div class="flex justify-end items-center" style="min-width: 50px">
                                        <sysIcon @click.stop="saveItem(item)" class="link mr-1" type="system-xiugai"></sysIcon>
                                        <sysIcon v-if="item.check" class="text-blue-500" type="system-dagou"></sysIcon>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="state.addPanel === 1">
                        <div class="flex justify-between items-center w-full p-1 pb-2 pl-3 pr-3">
                            <sysIcon @click="state.addPanel -= 1" class="link" type="system-changyong_fanhui"></sysIcon>
                            <div class="text-gray-600 font-bold">{{ state.formData.id ? '编辑' + props.title : '新建' + props.title }}</div>
                            <sysIcon @click="state.addPanel -= 1" class="link" type="system-changyong_guanbi"></sysIcon>
                        </div>
                        <a-divider class="m-0" />
                        <div class="p-6">
                            <d-input autofocus :placeholder="props.title + '名称'" v-model:value="state.formData.name"></d-input>
                            <div class="itemColor mt-3 pt-4 pb-4" v-if="props.title === '标签'">
                                <a-radio-group v-model:value="state.formData.color" class="flex justify-around">
                                    <a-radio value="#1B9AEE">
                                        <div class="rounded-full flex justify-center items-center" style="width: 26px; height: 26px; background: #1b9aee">
                                            <sysIcon v-show="state.formData.color === '#1B9AEE'" class="text-white" type="system-dagou"></sysIcon>
                                        </div>
                                    </a-radio>
                                    <a-radio value="#15AD31">
                                        <div class="rounded-full flex justify-center items-center" style="width: 26px; height: 26px; background: #15ad31">
                                            <sysIcon v-show="state.formData.color === '#15AD31'" class="text-white" type="system-dagou"></sysIcon>
                                        </div>
                                    </a-radio>
                                    <a-radio value="#009C95">
                                        <div class="rounded-full flex justify-center items-center" style="width: 26px; height: 26px; background: #009c95">
                                            <sysIcon v-show="state.formData.color === '#009C95'" class="text-white" type="system-dagou"></sysIcon>
                                        </div>
                                    </a-radio>
                                    <a-radio value="#6A70B8">
                                        <div class="rounded-full flex justify-center items-center" style="width: 26px; height: 26px; background: #6a70b8">
                                            <sysIcon v-show="state.formData.color === '#6A70B8'" class="text-white" type="system-dagou"></sysIcon>
                                        </div>
                                    </a-radio>
                                    <a-radio value="#FA8C15">
                                        <div class="rounded-full flex justify-center items-center" style="width: 26px; height: 26px; background: #fa8c15">
                                            <sysIcon v-show="state.formData.color === '#FA8C15'" class="text-white" type="system-dagou"></sysIcon>
                                        </div>
                                    </a-radio>
                                    <a-radio value="#E62412">
                                        <div class="rounded-full flex justify-center items-center" style="width: 26px; height: 26px; background: #e62412">
                                            <sysIcon v-show="state.formData.color === '#E62412'" class="text-white" type="system-dagou"></sysIcon>
                                        </div>
                                    </a-radio>
                                </a-radio-group>
                            </div>

                            <div class="flex gap-2">
                                <a-button @click="state.addPanel += 1" v-show="state.formData.id" ghost class="mt-4" type="danger" block>删除</a-button>
                                <a-button :disabled="state.formData.name ? false : true" class="mt-4" type="primary" block @click="createData">{{ state.formData.id ? '完成' : '创建' }}</a-button>
                            </div>
                        </div>
                    </div>
                    <div v-if="state.addPanel === 2">
                        <div class="flex justify-between items-center w-full p-1 pb-2 pl-3 pr-3">
                            <sysIcon @click="state.addPanel -= 1" class="link" type="system-changyong_fanhui"></sysIcon>
                            <div class="text-gray-600 font-bold">删除</div>
                            <sysIcon @click="state.addPanel = 0" class="link" type="system-changyong_guanbi"></sysIcon>
                        </div>
                        <a-divider class="m-0" />
                        <div class="p-6">
                            确认删除{{ props.title }}？
                            <a-button @click="deletItem" class="mt-4" type="danger" block>删除</a-button>
                        </div>
                    </div>
                </div>
            </template>
        </a-select>
    </div>
</template>
<script setup>
const emits = defineEmits(['update:value', 'change'])
const props = defineProps({
    title: '',
    value: Array,
    placeholder: {
        type: String,
        default: '请选择',
    },
    options: {
        type: [Object, Array],
        default: [],
    },
    disabled: {
        type: Boolean,
        default: false,
    },
})
const state = reactive({
    loading: true,
    value: [],
    options: [],
    formData: {
        color: '#1B9AEE',
        name: '',
        id: '',
    },
    keyword: '',
    addPanel: 0,
})

/* ==================项目窗口=================== */
const addItem = () => {
    state.addPanel += 1
    state.formData.id = undefined
    state.formData.name = undefined
    state.formData.color = '#1B9AEE'
}
const saveItem = item => {
    state.addPanel += 1
    state.formData.id = item.id
    state.formData.name = item.label
    state.formData.color = item.color
}
const deletItem = () => {
    axios
        .postForm(`${props.title === '项目' ? '/project/deleteProject' : '/task/deleteLabel'}`, {
            id: state.formData.id,
            name: state.formData.name,
            labelId: state.formData.id,
        })
        .then(res => {
            if (!res.success) return
            state.addPanel = 0
            state.value.forEach((element, index) => {
                if (element.value === state.formData.id) {
                    state.value.splice(index, 1)
                }
            })
            getItemList()
        })
}
const createData = () => {
    if (!state.formData.name) {
        message.warning(`请填写${props.title}名称`)
        return
    }
    if (state.formData.id && state.addPanel == 1) {
        axios.postJson(`${props.title === '项目' ? '/project/updateProject' : '/task/updateLabel'}`, state.formData).then(res => {
            if (!res.success) return
            state.addPanel = 0
            state.value.forEach((element, index) => {
                if (element.value === state.formData.id) {
                    state.value.splice(index, 1)
                }
            })
            getItemList()
        })
    } else {
        axios.postJson(`${props.title === '项目' ? '/project/createProject' : '/task/createLabel'}`, state.formData).then(res => {
            if (!res.success) return
            state.addPanel = 0
            getItemList()
        })
    }
}

// 打开弹窗
const openPanel = () => {
    getItemList()
}

function deselect() {
    state.options.forEach(element => {
        element.check = false
    })
}

function getItemList() {
    state.loading = true
    state.options = []
    axios.postForm(`${props.title === '项目' ? '/project/getProjects' : '/task/getLabels'}`).then(res => {
        if (!res.success) return
        state.options = res.data
        state.options.forEach(element => {
            element.show = true
            element.label = element.name
            element.value = element.id
            state.value.forEach(element2 => {
                if (element2.value == element.value) {
                    element.check = true
                }
            })
        })
        state.keyword = ''
        state.loading = false
    })
}

const checkItem = item => {
    if (props.title === '项目') {
        state.options.forEach(element => {
            element.check = false
        })
        item.check = true
        state.value = []
        state.value.push(item)
    } else {
        item.check = !item.check
        if (item.check) {
            state.value.push(item)
        } else {
            if (state.value.length) {
                state.value.forEach((element, index) => {
                    if (element.value == item.value) {
                        state.value.splice(index, 1)
                    }
                })
            }
        }
    }
    getVal()
}

watch(
    () => state.keyword,
    (newVal, oldVal) => {
        if (newVal) {
            state.options.forEach(element => {
                if (element.label.indexOf(newVal) > -1) {
                    element.show = true
                } else {
                    element.show = false
                }
            })
        } else {
            state.options.forEach(element => {
                element.show = true
            })
        }
    },
    { deep: true, immediate: true }
)

//内部值变化
function getVal() {
    emits('update:value', state.value)
}
//外部值变化
watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal !== undefined) {
            state.value = XEUtils.clone(newVal, true)
        }
    },
    { deep: true, immediate: true }
)

defineExpose({})
const { value, options } = toRefs(state)
</script>

<style>
.itemsClass {
    border-radius: 8px;
}
.itemsClass .link {
    color: transparent;
    font-weight: 700;
}
.itemsClass:hover .link {
    color: #666;
}
.readonly .ant-select-selector input {
    display: none;
}
.itemColor .ant-radio {
    width: 0;
    height: 0;
    opacity: 0;
}
.itemColor span.ant-radio + * {
    padding: 0;
}
.itemColor .ant-radio-wrapper {
    margin: 0;
}
</style>
